<template>
	<view class="cs-art-x">
		<view class="cs-art-ul">
			<view class="cs-art-ul-li" v-for="(item,index) in articleList" :key='index' @click="linkArticleDetail(item.article_id)">
				<!-- tc-mr，只有单张图片的时候才会生效这个类 -->
				<view :class="['li-tc', (item.imgList.length <= 1 && item.imgList.length > 0) ? ' tc-mr' : '']" v-html="item.title">
				</view>
				<!-- 多张图片 -->
				<view v-if="item.imgList.length >= 2" class="li-imgs_x">
					<view class="li-imgs" v-for="(src,index2) in item.imgList" :key='index2'>
						<image class="imgs" :src="src" mode="scaleToFill"></image>
					</view>
				</view>
				
				<!-- 单张图片 -->
				<view v-else-if="item.imgList.length <= 1 && item.imgList.length > 0">
					<image class="img" :src="item.imgList[0]" mode="scaleToFill"></image>
				</view>
				
				<!-- 视频 -->
				<view v-else-if='item.videoList.length > 0' class="li-video">
					<!-- /static/video.mp4 -->
					<video :src="item.videoList[0]" controls></video>
				</view>
				
				<view :class="['li-stats', (item.imgList.length <= 1 && item.imgList.length > 0) ? ' tc-mr' : '']">
					<text class='mr cr_top' v-if="item.is_top == 2">置顶</text>
					<text class='mr cr_active'>{{item.article_name}}</text>
					<text class='mr cr'>{{item.nicheng}}</text>
					<text class='mr cr'>{{item.commentnum}}评论</text>
					<text class='mr cr'>{{item.creat_time}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			articleList: Array,
		},
		methods: {
			// 跳转文章详情
			linkArticleDetail(article_id) {
				uni.navigateTo({
					url: `../recommend-detail?article_id=${article_id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cs-art-ul{
		margin-top: 216upx;
		padding: 0 30upx 30upx 30upx;
		border-top: 20upx solid #FAFAFA;
		background: #FFFFFF;
	}
	.cs-art-ul-li{
		position: relative;
		padding: 20upx 0;
		border-bottom: 1px solid #E5E5E5;
	}
	.li-tc{
		font-size: 32upx;
		color: #333333;
	}
	
	.tc-mr{ // 单张图片的时候,标题需要一定边距
		margin-right: 138upx;
	}
	
	.li-stats{
		// margin-right: 138upx;
		padding-top: 16upx;
	}
	// 多张图片样式
	.li-imgs_x{
		display: flex;
	}
	.li-imgs{
		margin-right: 10upx;
		width: 224upx;height: 180upx;	
	}
	.imgs{
		max-height: 100%;
		max-width: 100%;
	}
	// 单张图片样式
	.img{
		position: absolute;
		width: 136upx;
		height: 136upx;
		right: 0;top: 0;bottom: 0;
		margin: auto;
	}
	
	// 视频
	.li-video {
		& video {
			width: 100%;
		}
	}
	
	// 状态文字颜色相关样式
	.mr{margin-right: 30upx;font-size: 24upx;}
	.cr{color: #999999;}
	.cr_top{color: #F25252;}
	.cr_active{
		padding: 0 14upx;
		text-align: center;
		color: #FF9900;
		border: 1px solid;
		border-radius: 26upx;
	}
</style>
